<template>
  <div class="hello">
    <h1>子组件2</h1>
    <h5>(父子组件通信响应式修改)</h5>
    <!-- v-bind+v-on实现数据双向绑定，缩写 -->
    <input :value="value" @input="handlerChange" />
    <h4>收到父组件传递的数据： {{ value }}</h4>
    <h3>读取store中getter的数据：{{this.$store.getters.fullName}}</h3>
    <input v-model="newUserName">
    <button @click="updateUserNameByAction">Action修改</button>
  </div>
</template>

<script>
export default {
  name: 'HelloChild',
  props:["value"],
  data(){
    return{
      newUserName:'',
    }
  },
  methods:{
    handlerChange(e){
      this.$emit("input", e.target.value);
    },
    updateUserNameByAction(){
      this.$store.dispatch("updateUserName",this.newUserName);
    }
  }
}
</script>
<style scoped lang="scss">
  .hello {
    background-color:beige;
  }
</style>